{% load static %}
<!DOCTYPE html>
<html class="no-js" lang="en">
  <head>
    <!-- Meta Tags -->
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="ThemeDox">
    <!-- Favicon Icon -->
    <link rel="icon" href="{% static 'assets/img/favicon.png' %}">
    <!-- Site Title -->
    <title>Educve | Online Education Platform</title>
    <link rel="stylesheet" href="{% static 'assets/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'assets/css/fontawesome.min.css' %}">
    <link rel="stylesheet" href="{% static 'assets/css/slick.min.css' %}">
    <link rel="stylesheet" href="{% static 'assets/css/odometer.css' %}">
    <link rel="stylesheet" href="{% static 'assets/css/animate.css' %}">
    <link rel="stylesheet" href="{% static 'assets/css/jquery-ui.min.css' %}">
    <link rel="stylesheet" href="{% static 'assets/css/style.css' %}">
  </head>
  <body>
    <!-- Start Preloader -->
    <div class="td_preloader">
      <div class="td_preloader_in">
        <span></span>
        <span></span>
      </div>
    </div>
    <!-- End Preloader -->
    <!-- Start Header Section -->
    <header class="td_site_header td_style_1 td_type_2 td_sticky_header td_medium td_heading_color">
      <div class="td_main_header">
        <div class="container">
          <div class="td_main_header_in">
            <div class="td_main_header_left">
              <a class="td_site_branding td_accent_color" href="/">
                <svg width="142" height="50" viewBox="0 0 142 50" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M59.896 34V16.96H70.504V20.272H63.376V23.776H69.064V27.088H63.376V30.688H70.504V34H59.896ZM77.6982 34.264C76.1142 34.264 74.7782 33.648 73.6902 32.416C72.6022 31.184 72.0582 29.712 72.0582 28C72.0582 26.288 72.6022 24.816 73.6902 23.584C74.7782 22.352 76.1142 21.736 77.6982 21.736C78.4662 21.736 79.1542 21.896 79.7622 22.216C80.3702 22.536 80.8342 22.912 81.1542 23.344V16H84.4422V34H81.1542V32.656C80.8342 33.088 80.3702 33.464 79.7622 33.784C79.1542 34.104 78.4662 34.264 77.6982 34.264ZM76.1862 30.352C76.7462 30.96 77.4822 31.264 78.3942 31.264C79.3062 31.264 80.0342 30.96 80.5782 30.352C81.1382 29.744 81.4182 28.96 81.4182 28C81.4182 27.04 81.1382 26.256 80.5782 25.648C80.0342 25.04 79.3062 24.736 78.3942 24.736C77.4822 24.736 76.7462 25.04 76.1862 25.648C75.6422 26.256 75.3702 27.04 75.3702 28C75.3702 28.96 75.6422 29.744 76.1862 30.352ZM92.0067 34.264C90.5827 34.264 89.4707 33.784 88.6707 32.824C87.8867 31.864 87.4947 30.576 87.4947 28.96V22H90.7827V28.408C90.7827 30.312 91.4627 31.264 92.8227 31.264C93.5907 31.264 94.1907 30.976 94.6227 30.4C95.0707 29.824 95.2947 28.976 95.2947 27.856V22H98.5827V34H95.2947V32.632C94.5587 33.72 93.4627 34.264 92.0067 34.264ZM107.292 34.264C105.484 34.264 103.98 33.664 102.78 32.464C101.58 31.248 100.98 29.76 100.98 28C100.98 26.24 101.58 24.76 102.78 23.56C103.98 22.344 105.484 21.736 107.292 21.736C108.892 21.736 110.228 22.184 111.3 23.08C112.388 23.976 113.1 25.144 113.436 26.584H110.028C109.5 25.336 108.588 24.712 107.292 24.712C106.412 24.712 105.692 25.016 105.132 25.624C104.572 26.216 104.292 27.008 104.292 28C104.292 28.992 104.572 29.792 105.132 30.4C105.692 30.992 106.412 31.288 107.292 31.288C108.588 31.288 109.5 30.664 110.028 29.416H113.436C113.1 30.856 112.388 32.024 111.3 32.92C110.228 33.816 108.892 34.264 107.292 34.264ZM119.156 34L113.852 22H117.476L120.644 29.68L123.812 22H127.484L122.156 34H119.156ZM134.245 34.264C132.405 34.264 130.893 33.672 129.709 32.488C128.541 31.304 127.957 29.8 127.957 27.976C127.957 26.184 128.549 24.696 129.733 23.512C130.933 22.328 132.445 21.736 134.269 21.736C136.109 21.736 137.637 22.368 138.853 23.632C140.069 24.88 140.629 26.592 140.533 28.768H131.173C131.237 29.52 131.549 30.152 132.109 30.664C132.669 31.16 133.437 31.408 134.413 31.408C135.005 31.408 135.525 31.296 135.973 31.072C136.437 30.832 136.765 30.504 136.957 30.088H140.389C140.037 31.32 139.301 32.328 138.181 33.112C137.061 33.88 135.749 34.264 134.245 34.264ZM134.173 24.4C133.421 24.4 132.789 24.6 132.277 25C131.781 25.384 131.453 25.92 131.293 26.608H136.933C136.757 25.856 136.405 25.304 135.877 24.952C135.365 24.584 134.797 24.4 134.173 24.4Z" fill="#00001B"/>
                  <circle cx="25" cy="25" r="25" fill="currentColor"/>
                  <g clip-path="url(#clip0_34_14899)">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M17.6915 23.9346C18.2982 25.1384 18.9033 26.3434 19.4831 27.5603L20.7868 30.2966C19.6372 30.3352 18.4865 30.3446 17.3384 30.4123C16.9003 30.4381 16.4646 30.5029 16.032 30.5769C15.4137 30.6826 14.7728 30.8545 14.1811 31.0978C13.4088 31.4153 12.3426 32.1172 12.3651 33.0869C12.3836 34.0387 13.0616 34.718 13.7151 35.3261C14.2917 35.8627 15.129 36.237 15.8399 36.5878C17.2978 37.3071 18.8228 37.9189 20.345 38.4872C21.3987 38.8805 22.4564 39.1839 23.557 39.4161C24.0709 39.5246 24.8905 39.5507 25.1519 38.9685C25.3414 38.5422 25.1901 38.0676 25.0213 37.6621C24.8056 37.1442 24.5748 36.6309 24.3443 36.1193L23.3983 34.019C24.8537 34.0449 26.3091 34.0903 27.7648 34.0967C28.9242 34.1021 30.0706 34.0357 31.2184 33.8702C32.2961 33.7147 33.5785 33.2606 34.1405 32.2531C34.8037 31.0644 34.1516 29.5566 33.5154 28.5002C33.2227 28.0142 32.9679 27.5031 32.6372 27.0422L30.409 23.9364C30.8045 23.3755 31.2169 22.8258 31.5959 22.2532C32.1584 21.4035 32.7113 20.5467 33.2326 19.6709C33.5952 19.0613 33.9323 18.4358 34.246 17.7997C34.8447 16.5863 35.8595 14.5917 34.6211 13.4251C33.8654 12.7133 32.6785 12.6594 31.7023 12.7973C30.6783 12.942 29.6564 13.1058 28.6391 13.2918C25.9819 13.7779 23.3159 14.6562 20.7236 15.4506C19.7968 15.7346 18.8928 16.0886 17.9834 16.4235C17.371 16.649 16.7688 16.9717 16.1864 17.2853C15.8381 17.4728 15.4914 17.7387 15.2819 18.0797C15.1573 18.2824 15.197 18.5797 15.239 18.8016C15.3211 19.2346 15.5045 19.6413 15.6866 20.0395L17.6915 23.9346ZM26.7116 17.0955C27.6632 16.9126 28.6153 16.7319 29.5699 16.5654C29.8718 16.5128 30.6256 16.3337 30.7984 16.6955C31.0405 17.203 30.3779 18.0664 30.1456 18.4899C29.9469 18.8522 29.7362 19.208 29.5303 19.5661L28.4345 21.4736L26.7637 19.6085L25.1187 17.9898L24.6924 17.6376L24.5487 17.5302C25.2696 17.3853 25.9894 17.2342 26.7116 17.0955ZM23.7236 18.6969C23.7428 18.6953 23.7613 18.7135 23.773 18.7275L23.8285 18.7967C23.9337 18.9536 24.0295 19.1142 24.1286 19.2748C24.5714 19.9926 25.0138 20.7108 25.4571 21.4282C25.7507 21.9035 26.0458 22.378 26.3394 22.8535L26.9193 23.7933L26.9697 23.8784C26.5516 24.5661 26.144 25.2603 25.7153 25.9414C25.3806 26.4734 25.0294 26.9952 24.6799 27.5176C24.5293 27.742 24.2884 28.0566 23.9799 28.0188C23.3831 27.9455 23.1885 27.0109 23.1224 26.5346C23.087 26.2795 23.0553 26.0234 23.0371 25.7664C23.0041 25.3024 22.9577 24.8374 22.9689 24.3723C22.9845 23.7316 22.9884 23.0906 23.0154 22.4503C23.0316 22.0677 23.0422 21.6832 23.0984 21.3044C23.1759 20.7816 23.2533 20.2587 23.3308 19.7359C23.3638 19.5134 23.4343 19.2967 23.5007 19.0821C23.5358 18.9894 23.5737 18.9 23.6168 18.8107C23.6168 18.8107 23.673 18.7013 23.7236 18.6969ZM22.852 34.9373C23.154 35.6715 23.4694 36.4216 23.6726 37.1983C23.6987 37.298 23.7175 37.3998 23.731 37.5019C23.742 37.5856 23.7434 37.6705 23.7461 37.7548C23.7473 37.7779 23.7138 37.801 23.6935 37.8038C23.6516 37.8094 23.6096 37.7856 23.5751 37.7646C22.6892 37.2343 21.8064 36.6983 20.9187 36.1712L17.45 34.1121L17.3431 34.0457L17.4261 34.0284L17.7619 33.9915C18.4115 33.975 19.0608 33.9298 19.7104 33.9416L22.4617 33.9917C22.5919 34.3069 22.7223 34.6219 22.852 34.9373ZM29.9463 30.2515C29.8074 30.3733 29.5867 30.4057 29.4098 30.4284C29.1844 30.4571 28.9579 30.4899 28.7307 30.4905C27.9469 30.4922 27.1629 30.507 26.3793 30.4955C25.8394 30.4877 25.2999 30.4561 24.7607 30.4326L21.623 30.2968C21.441 29.906 21.2591 29.5149 21.0766 29.1244L18.7424 24.1318C18.2316 22.9813 17.7089 21.8359 17.2101 20.6802C17.1162 20.4624 17.0433 20.2359 16.9649 20.0121C16.8864 19.7879 16.778 19.4809 16.8955 19.25C16.9985 19.0508 17.2415 18.9639 17.4424 18.9013C17.5459 18.869 17.6518 18.8435 17.7586 18.8235C18.6303 18.6596 19.5046 18.509 20.3772 18.3493L22.7308 17.9184L22.637 18.1895L22.5239 18.7034L22.5181 18.7358C22.4377 19.6185 22.3259 20.4986 22.2768 21.3834C22.2204 22.4003 22.2103 23.4196 22.2014 24.4379C22.1973 24.9151 22.208 25.393 22.2375 25.8692C22.2634 26.2839 22.2995 26.6996 22.3676 27.1095C22.4273 27.4702 22.5192 27.8257 22.6205 28.1771C22.7706 28.6982 23.0519 29.2125 23.502 29.5319C23.6568 29.6418 23.8327 29.723 24.0181 29.7645C24.6048 29.8962 25.2249 29.5999 25.6842 29.2579C26.1714 28.8951 26.6961 28.4813 27.1045 28.0136L28.4841 26.4332C28.7557 26.9069 29.0488 27.3692 29.299 27.8546C29.5435 28.3286 29.7491 28.822 29.9668 29.3091C30.0777 29.5572 30.1854 29.9613 29.9936 30.2019C29.9794 30.2199 29.9635 30.2363 29.9463 30.2515Z" fill="white"/>
                  </g>
                  <defs>
                  <clipPath id="clip0_34_14899">
                  <rect width="30" height="30" fill="white" transform="translate(21.2891 4) rotate(35.1898)"/>
                  </clipPath>
                  </defs>
                </svg>                  
              </a>
            </div>
          </div>
        </div>
      </div>
    </header>
    <!-- End Header Section -->
    
    <!-- Start Signup Section -->
    <section>
      <div class="td_height_120 td_height_lg_80"></div>
      <div class="container">
        <div class="row td_gap_y_40">
          <div class="col-lg-6">
            <div class="td_form_card td_style_1 td_radius_10 td_gray_bg_5">
              <div class="td_form_card_in">
                <h2 class="td_fs_36 td_mb_20">SIGN UP</h2>
                <hr>
                <div class="td_height_30 td_height_lg_30"></div>
                
                {% if messages %}
                  {% for message in messages %}
                    <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                      {% if message.tags == 'error' %}
                        <i class="fas fa-exclamation-circle me-2"></i>
                      {% elif message.tags == 'success' %}
                        <i class="fas fa-check-circle me-2"></i>
                      {% elif message.tags == 'warning' %}
                        <i class="fas fa-exclamation-triangle me-2"></i>
                      {% elif message.tags == 'info' %}
                        <i class="fas fa-info-circle me-2"></i>
                      {% endif %}
                      {{ message }}
                      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                  {% endfor %}
                {% endif %}
                
                <form id="registerForm" method="POST" action="{% url 'register' %}">
                  {% csrf_token %}
                  
                  <div class="mb-3">
                    <input type="text" class="td_form_field td_mb_30 td_medium td_white_bg" name="full_name" id="full_name" placeholder="Full Name *" required>
                  </div>
                  
                  <div class="mb-3">
                    <input type="email" class="td_form_field td_mb_30 td_medium td_white_bg" name="email" id="email" placeholder="Email *" required>
                  </div>
                  
                  <div class="mb-3">
                    <input type="tel" class="td_form_field td_mb_30 td_medium td_white_bg" name="phone_no" id="phone_no" placeholder="Phone Number *" required>
                  </div>
                  
                  <input type="password" class="td_form_field td_mb_30 td_medium td_white_bg" id="password" name="password" placeholder="Password *" required>
                  <input type="password" class="td_form_field td_mb_30 td_medium td_white_bg" id="confirm_password" name="confirm_password" placeholder="Confirm Password *" required>
                  
                  <select class="td_form_field td_mb_30 td_medium td_white_bg" id="role" name="role" required onchange="toggleRoleFields()" title="Select your position">
                    <option value="" disabled selected>Select Position *</option>
                    <option value="student">Student</option>
                    <option value="teacher">Teacher</option>
                  </select>
                  
                  <!-- 学生特定字段 -->
                  <div id="student-fields" class="role-fields" style="display: none;">
                    <input type="text" class="td_form_field td_mb_30 td_medium td_white_bg" id="degree_programme" name="degree_programme" placeholder="Degree Programme *">
                    <select class="td_form_field td_mb_30 td_medium td_white_bg" id="year_of_study" name="year_of_study">
                      <option value="" disabled selected>Select Year of Study *</option>
                      <option value="1">Year 1</option>
                      <option value="2">Year 2</option>
                      <option value="3">Year 3</option>
                      <option value="4">Year 4</option>
                      <option value="5">Graduate</option>
                    </select>
                  </div>
                  
                  <!-- 教师特定字段 -->
                  <div id="teacher-fields" class="role-fields" style="display: none;">
                    <select class="td_form_field td_mb_30 td_medium td_white_bg" id="title" name="title">
                      <option value="" disabled selected>Select Title *</option>
                      <option value="Professor">Professor</option>
                      <option value="Associate Professor">Associate Professor</option>
                      <option value="Assistant Professor">Assistant Professor</option>
                      <option value="Lecturer">Lecturer</option>
                    </select>
                    <input type="text" class="td_form_field td_mb_30 td_medium td_white_bg" id="department" name="department" placeholder="Department *">
                    <input type="text" class="td_form_field td_mb_30 td_medium td_white_bg" id="office_location" name="office_location" placeholder="Office Location *">
                  </div>
                  
                  <div class="td_form_card_bottom td_mb_25">
                    <button type="submit" class="td_btn td_style_1 td_radius_10 td_medium">
                      <span class="td_btn_in td_white_color td_accent_bg">
                        <span>Sign Up</span>
                      </span>             
                    </button>
                  </div>
                  <p class="td_form_card_text td_fs_20 td_medium td_heading_color mb-0">Already Have an Account? <a href="{% url 'login' %}">Sign in</a></p>
                </form>
              </div>
            </div>
          </div>
          <div class="col-lg-6">
            <div class="td_sign_thumb">
              <img src="{% static 'assets/img/others/login.jpg' %}" alt="" class="w-100 td_radius_10">
            </div>
          </div>
        </div>
      </div>
      <div class="td_height_120 td_height_lg_80"></div>
    </section>
    <!-- End Signup Section -->
    
    <!-- Start Footer Section -->
    <footer class="td_footer td_style_1">
      <div class="container">
        <div class="td_footer_bottom_in">
          <div class="td_copyright">© 2024 Educve | All Rights Reserved</div>
        </div>
      </div>
    </footer>
    <!-- End Footer Section -->
    
    <!-- Start Scroll Up Button -->
    <div class="td_scrollup">
      <i class="fa-solid fa-arrow-up"></i>
    </div>
    <!-- End Scroll Up Button -->
    
    <!-- Script -->
    <script src="{% static 'assets/js/jquery-3.7.1.min.js' %}"></script>
    <script src="{% static 'assets/js/jquery.slick.min.js' %}"></script>
    <script src="{% static 'assets/js/odometer.js' %}"></script>
    <script src="{% static 'assets/js/gsap.min.js' %}"></script>
    <script src="{% static 'assets/js/jquery-ui.min.js' %}"></script>
    <script src="{% static 'assets/js/wow.min.js' %}"></script>
    <script src="{% static 'assets/js/main.js' %}"></script>
    
    <script>
      // 切换角色特定字段的显示
      function toggleRoleFields() {
        const role = document.getElementById('role').value;
        const studentFields = document.getElementById('student-fields');
        const teacherFields = document.getElementById('teacher-fields');
        
        if (role === 'student') {
          studentFields.style.display = 'block';
          teacherFields.style.display = 'none';
        } else if (role === 'teacher') {
          studentFields.style.display = 'none';
          teacherFields.style.display = 'block';
        } else {
          studentFields.style.display = 'none';
          teacherFields.style.display = 'none';
        }
      }
      
      // 密码验证
      document.getElementById('registerForm').addEventListener('submit', function(event) {
        const password = document.getElementById('password').value;
        const confirmPassword = document.getElementById('confirm_password').value;
        
        if (password !== confirmPassword) {
          event.preventDefault();
          
          // 创建自定义警告
          const alertDiv = document.createElement('div');
          alertDiv.className = 'alert alert-warning alert-dismissible fade show';
          alertDiv.role = 'alert';
          alertDiv.innerHTML = `
            <i class="fas fa-exclamation-triangle me-2"></i>
            Passwords do not match!
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
          `;
          
          // 插入到表单前面
          const form = document.getElementById('registerForm');
          form.parentNode.insertBefore(alertDiv, form);
          
          // 自动滚动到顶部
          window.scrollTo(0, 0);
        }
      });
      
      // 自动关闭警告
      const alerts = document.querySelectorAll('.alert');
      alerts.forEach(alert => {
        setTimeout(() => {
          const bsAlert = new bootstrap.Alert(alert);
          bsAlert.close();
        }, 5000); // 5秒后自动关闭
      });
    </script>
  </body>
</html>
